<template>
  <div class="datePick">
    <el-date-picker
      :class="showIcon ? 'elDatePickerShowIcon' : 'elDatePickerHideIcon'"
      ref="datePick"
      :key="pickKey"
      :type="isShowTime ? 'datetime' : 'date'"
      :value-format="isShowTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
      :format="isShowTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
      append-to-body
      @focus="handleFocus"
      @blur="handleBlur"
      v-model="dateValue"
    ></el-date-picker>
    <i v-if="!isShowTime && showIcon" class="el-icon-time timeIcon" @click="showTimePicker"></i>
    <i v-else-if="isShowTime && showIcon" class="el-icon-date timeIcon" @click="showDatePicker"></i>
  </div>
</template>

<script>
export default {
  name: 'ChangeDateTimePicker',
  props: {
    value: {
      type: String,
      default: '',
    },
    initVlue:{
      type:String,
      default:'date'
    }
  },
  data() {
    return {
      dateValue: this.value,
      isShowTime: false,
      pickKey: Date.now(),
      showIcon: true,
    }
  },
  watch: {
    value: {
      immediate: true,  // 添加 immediate 属性
      deep: true,
      handler(newVal) {
        this.dateValue = newVal
        if(newVal){
          const type = newVal.length === 19 ? 'datetime' : 'date'
          this.isShowTime = type === 'datetime'
        }
      }
    },
    dateValue(newVal){
      console.log(newVal,'---dateValue 变更')
      this.$emit('input', newVal)
    },
    // initVlue(newVal){
    //   if(newVal){
    //     console.log(newVal,'---initVlue 变更')
    //     const type = newVal.length === 19 ? 'datetime' : 'date'
    //     this.isShowTime = type === 'datetime'
    //   }
    // }
  },
  methods: {
    showTimePicker() {
      this.isShowTime = true
      this.dateValue = ''
      this.$nextTick(() => {
        // 获取日期选择器实例并调用focus方法
        const datePickerArr = this.$refs.datePick
        if (Array.isArray(datePickerArr)) {
          // 如果是数组，找到对应的实例
          const picker = datePickerArr[0]
          if (picker && picker.$refs && picker.$refs.reference) {
            picker.$refs.reference.focus()
          }
        } else if (datePickerArr && datePickerArr.$refs && datePickerArr.$refs.reference) {
          // 如果不是数组，直接使用
          datePickerArr.$refs.reference.focus()
        }
      })
    },
    showDatePicker() {
      this.isShowTime = false
      this.dateValue = ''
      this.$nextTick(() => {
        // 获取日期选择器实例并调用focus方法
        const datePickerArr = this.$refs.datePick
        if (Array.isArray(datePickerArr)) {
          // 如果是数组，找到对应的实例
          const picker = datePickerArr[0]
          if (picker && picker.$refs && picker.$refs.reference) {
            picker.$refs.reference.focus()
          }
        } else if (datePickerArr && datePickerArr.$refs && datePickerArr.$refs.reference) {
          // 如果不是数组，直接使用
          datePickerArr.$refs.reference.focus()
        }
      })
    },
    handleFocus() {
      this.showIcon = false
    },
    handleBlur() {
      this.showIcon = true
    },
  },
}
</script>
<style lang="scss" scoped>
.datePick {
  position: relative;
  .elDatePickerShowIcon {
    // .el-date-editor{
    width: 180px !important;
    :deep(.el-input__prefix) {
      right: 30px !important;
    }
  }
  :deep(.el-input__prefix) {
    left: unset;
    right: 5px;
  }
  .elDatePickerHideIcon {
    width: 180px !important;
  }
  .timeIcon {
    position: absolute;
    right: 3px;
    top: 50%;
    padding: 7px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #c0c4cc;
  }

}
</style>
